<%@ page import="com.uniandes.modelviewer.dsl.XmiModel"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/examples.css" />
<link rel="stylesheet" type="text/css" href="../../css/UmlCanvas.css" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<meta name="layout" content="main">
<g:set var="entityName"
	value="${message(code: 'xmiModel.label', default: 'XmiModel')}" />
<title><g:message code="default.show.label" args="[entityName]" /></title>
<style type="text/css" media="screen">
#status {
	background-color: #eee;
	border: .2em solid #fff;
	margin: 2em 2em 1em;
	padding: 1em;
	width: 12em;
	float: left;
	-moz-box-shadow: 0px 0px 1.25em #ccc;
	-webkit-box-shadow: 0px 0px 1.25em #ccc;
	box-shadow: 0px 0px 1.25em #ccc;
	-moz-border-radius: 0.6em;
	-webkit-border-radius: 0.6em;
	border-radius: 0.6em;
	text-align: center;
}

.ie6 #status {
	display: inline;
	/* float double margin fix http://www.positioniseverything.net/explorer/doubled-margin.html */
}

#status ul {
	font-size: 0.9em;
	list-style-type: none;
	margin-bottom: 0.6em;
	padding: 0;
}

#status li {
	line-height: 1.3;
}

#status h1 {
	text-transform: uppercase;
	font-size: 1.1em;
	margin: 0 0 0.3em;
}

#page-body {
	margin: 2em 1em 1.25em 18em;
}

h2 {
	margin-top: 1em;
	margin-bottom: 0.3em;
	font-size: 1em;
}

p {
	line-height: 1.5;
	margin: 0.25em 0;
}

#controller-list ul {
	list-style-position: inside;
}

#controller-list li {
	line-height: 1.3;
	list-style-position: inside;
	margin: 0.25em 0;
}

@media screen and (max-width: 480px) {
	#status {
		display: none;
	}
	#page-body {
		margin: 0 1em 1em;
	}
	#page-body h1 {
		margin-top: 0;
	}
}
</style>
</head>
<body>
	<g:javascript src="includes2.js" />
	<g:javascript src="_lib/jquery.js" />
	<g:javascript src="_lib/jquery.cookie.js" />
	<g:javascript src="_lib/jquery.hotkeys.js" />
	<g:javascript src="jquery.jstree.js" />
	<g:javascript src="_docs/syntax/!script.js" />
	<script type="text/javascript">
		var jQuery_1= $.noConflict(true);
	</script>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script type="text/javascript">
		var jQuery_2= $.noConflict(true);
	</script>
	<div id="status" role="complementary">
		<h1>Meta Models</h1>
		<ul>
			<g:metaModelsList />
		</ul>
		<h1>Models</h1>
		<div id="modelList" class="demo" style="height: 100px;">
			<g:modelsList />
		</div>
		<g:classDescDivs/>
		<div id="dialog" title="Descripcion del Elemento" style="display:none">This is the default dialog
		which is useful for displaying information. The dialog window can be
		moved, resized and closed with the 'x' icon.</div>
		
		<g:javascript class="source below">

jQuery_1(function () {
	jQuery_1("#modelList")
		.jstree({ "plugins" : ["themes","html_data","ui"] })
		.bind("select_node.jstree", function (event, data) { 
			var id = data.rslt.obj.attr("id");
			var campos = id.split(".");
			var preffix = campos[0];
			if(preffix == "class")
			{
				var s = "#"+id+".d";
				var s2 = id+".d";
				var div = document.getElementById("dialog");
				var elem = document.getElementById(s2);
				console.log(document.getElementById(s2));
				div.innerHTML = elem.innerHTML;
				//jQuery_1("#dialog").html(""+document.getElementById(s2));
				jQuery_2( "#dialog" ).dialog();
			}
			else
			{
				window.location = "/GrailsModelViz/xmiModel/show/"+campos[1];
			}
		})

		.delegate("a", "click", function (event, data) { event.preventDefault(); })
});
		
		</g:javascript>
	<g:javascript>
		function changeDesc(idElem)
		{
			var elem = document.getElementById(idElem);
			var div = document.getElementById("dialog");
			div.innerHTML = elem.innerHTML;
			jQuery_2( "#dialog" ).dialog();			
		}
		</g:javascript>
		<div id="show-ecoreMetaModel" class="content scaffold-show"
			role="main">
<%--			<h1>--%>
<%--				<g:message code="default.show.label" args="[entityName]" />--%>
<%--			</h1>--%>
			<g:if test="${xmiModelInstance?.modelDsl}">
				<g:set var="xmiModelInstance"	value="${xmiModelInstance}" />
			</g:if>

		</div>
	</div>
	<div id="page-body" role="main">
		<h1>
			${fieldValue(bean: xmiModelInstance, field: "name")}
		</h1>
		<canvas
			class="UmlCanvas Tabbed withConsole withSource withoutInspector"
			id="myModel" width="600" height="700"></canvas>
		<textarea id="UC_editor_for_myModel" style="display: none">
		${fieldValue(bean: xmiModelInstance, field: "modelDsl")}
		</textarea>

<%--		<g:if test="${xmiModelInstance?.modelDsl}">--%>
<%--			<li class="fieldcontain"><span id="modelDsl-label"--%>
<%--				class="property-label"><g:message--%>
<%--						code="xmiModel.modelDsl.label" default="Model Dsl" /></span> <span--%>
<%--				class="property-value" aria-labelledby="modelDsl-label"><g:fieldValue--%>
<%--						bean="${xmiModelInstance}" field="modelDsl" /></span></li>--%>
<%--		</g:if>--%>

	</div>


</body>
</html>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--	<head>--%>
<%--		<meta name="layout" content="main">--%>
<%--		<g:set var="entityName" value="${message(code: 'xmiModel.label', default: 'XmiModel')}" />--%>
<%--		<title><g:message code="default.show.label" args="[entityName]" /></title>--%>
<%--	</head>--%>
<%--	<body>--%>
<%--		<a href="#show-xmiModel" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>--%>
<%--		<div class="nav" role="navigation">--%>
<%--			<ul>--%>
<%--				<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>--%>
<%--				<li><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></li>--%>
<%--				<li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>--%>
<%--			</ul>--%>
<%--		</div>--%>
<%--		<div id="show-xmiModel" class="content scaffold-show" role="main">--%>
<%--			<h1><g:message code="default.show.label" args="[entityName]" /></h1>--%>
<%--			<g:if test="${flash.message}">--%>
<%--			<div class="message" role="status">${flash.message}</div>--%>
<%--			</g:if>--%>
<%--			<ol class="property-list xmiModel">--%>
<%--			--%>
<%--				<g:if test="${xmiModelInstance?.modelDsl}">--%>
<%--				<li class="fieldcontain">--%>
<%--					<span id="modelDsl-label" class="property-label"><g:message code="xmiModel.modelDsl.label" default="Model Dsl" /></span>--%>
<%--					--%>
<%--						<span class="property-value" aria-labelledby="modelDsl-label"><g:fieldValue bean="${xmiModelInstance}" field="modelDsl"/></span>--%>
<%--					--%>
<%--				</li>--%>
<%--				</g:if>--%>
<%--			--%>
<%--				<g:if test="${xmiModelInstance?.name}">--%>
<%--				<li class="fieldcontain">--%>
<%--					<span id="name-label" class="property-label"><g:message code="xmiModel.name.label" default="Name" /></span>--%>
<%--					--%>
<%--						<span class="property-value" aria-labelledby="name-label"><g:fieldValue bean="${xmiModelInstance}" field="name"/></span>--%>
<%--					--%>
<%--				</li>--%>
<%--				</g:if>--%>
<%--			--%>
<%--			</ol>--%>
<%--			<g:form>--%>
<%--				<fieldset class="buttons">--%>
<%--					<g:hiddenField name="id" value="${xmiModelInstance?.id}" />--%>
<%--					<g:link class="edit" action="edit" id="${xmiModelInstance?.id}"><g:message code="default.button.edit.label" default="Edit" /></g:link>--%>
<%--					<g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />--%>
<%--				</fieldset>--%>
<%--			</g:form>--%>
<%--		</div>--%>
<%--	</body>--%>
<%--</html>--%>
